
<template>
	<view class="uni-content">
		
			
			<!-- 顶部文字 -->
			<text class="title title-box">用户名密码注册</text>
		
		<uni-forms ref="form" :modelValue="form" :rules="rules"validateTrigger='blur'>
			
			<uni-forms-item name="username" required>
				<uni-easyinput  v-model="form.username" prefixIcon="person" placeholder="请输入用户名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="password"required>
				<uni-easyinput class="input-box" placeholder="请输入8-16位密码" type="password"v-model="form.password" trim="both"  prefixIcon="locked"/>
			</uni-forms-item>
			<uni-forms-item name="confirm">
			<uni-easyinput type="password" v-model="form.confirm" prefixIcon="locked" placeholder="请确认密码"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
		<button class="uni-btn" type="primary" @click="submit">注册</button>
		
			<view class="link-box">
				<text class="forget">已有账号？</text>
				<text class="link" @click="toLogin">点此登录</text>
			</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return{
			form: {
						role: '用户'
					},
				rules: {
				// 对username字段进行必填验证
				username: {
				// username 字段的校验规则
				rules:[
				// 校验 username 不能为空
				{
				required: true,
				errorMessage: '请输入账号',
				},
				// 对username字段进行长度验证
				{
				minLength: 3,
				maxLength: 10,
				errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
				}
				],
			},
				password: {
					rules:[
							{
							required: true,
							errorMessage: '请输入密码',
							},
							{
							minLength: 6,
							maxLength: 16,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
				},
				
				focusUsername: false,
				
				focusPassword: false,
				focusPassword2: false,
				
			}
				
		}
		},
	
		onShow() {
			
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				this.$refs.form.validate().then((res) => {
					
					if (this.form.password !== this.form.confirm) {
						uni.showToast({
							icon:"none",
							title: '两次密码输入不一致'
						})
						return
					}
				
					
					this.$request.post( '/register',this.form).then(res => {
						if (res.code === '200') {
							// 跳转页面
							uni.navigateTo({
								url: '/pages/login/login'
							})
							uni.showToast({
								icon:'success',
								title: '注册成功'
							})
						}
					})
				}).catch(err =>{
						console.log('表单错误信息：', err);
				})	
			},
			
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (max-width: 690px) {
		.uni-content {
			margin-top: 15px;
			height: 100%;
			
		}
	}

	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 30px 40px 60px;
			max-height: 530px;
		}

		.link-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;
		}

		.link {
			font-size: 12px;
		}
	}

	.uni-content ::v-deep .uni-forms-item__label {
		position: absolute;
		left: -15px;
	}

	button {
		margin-top: 15px;
	}
</style>
